Skip to content

Split package into modules#161

Merged
akademy merged 6 commits into
mainfrom
code-splitting
Apr 29, 2026
Merged

Split package into modules#161
akademy merged 6 commits into
mainfrom
code-splitting

Conversation

@gfrn
Copy link
Copy Markdown
Collaborator

@gfrn gfrn commented Apr 10, 2026

Since not everyone might use JSON Forms and all the features sci-react-ui has, I've made this PR as a proposal to allow code splitting of modules, that way, one can import only what they need and reduce bundle size (similar to the approach material-ui has, for instance).

We also reduce the number of dependencies, as that way, one doesn't end up importing JSON-Forms or KeycloakJS if they're only using navbars.

Also, as a follow-up to #160, I've used default exports for material-icons, as that only imports the icons we're actually using.

I've also rewritten package exports to use a slightly more modern (supported since Node v12) structure, where instead of using main and module, we can assign several separate exports and entry points, which makes tree-shaking and code splitting easier.

However, this is still backwards compatible, and anyone using barrel imports from @diamondlightsource/sci-react-ui directly should not be affected, nor should anyone building this package on Node <v12 (they shouldn't, but it still works)

This requires #160 as it builds on top of those changes.

@gfrn gfrn requested a review from akademy April 10, 2026 15:30
@gfrn gfrn self-assigned this Apr 10, 2026
@gfrn gfrn changed the title Split package into navigation/theme subpackages Split package into navigation/theme modules Apr 10, 2026
@gfrn gfrn changed the title Split package into navigation/theme modules Split package into modules Apr 10, 2026
@akademy akademy added the being reviewed Someone is reviewing this PR label Apr 23, 2026
Comment thread src/components/navigation/NavMenu.tsx Outdated
Co-authored-by: Matthew Wilcoxson <akademy@users.noreply.github.com>
Copy link
Copy Markdown
Member

@akademy akademy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good. So many times I've had problems with those icon imports downstream, but it looks like you may finally fixed it. Nice work.

@gfrn
Copy link
Copy Markdown
Collaborator Author

gfrn commented Apr 29, 2026

This looks good. So many times I've had problems with those icon imports downstream, but it looks like you may finally fixed it. Nice work.

I think this was down to a bug in MUI v6, at least according to the GitHub threads I found, so that's more on them than it is me

@akademy akademy merged commit 700bb68 into main Apr 29, 2026
4 checks passed
vredchenko added a commit that referenced this pull request Apr 29, 2026
Bumps devDependencies to non-vulnerable versions:
- @babel/core, @babel/preset-env, @babel/preset-typescript -> ^7.26.10
- @storybook/* and storybook -> ^8.6.15
- eslint -> ^9.20.0

Adds pnpm overrides for transitive deps flagged by the scanner:
qs, js-yaml, brace-expansion (v1 & v2), @babel/runtime, esbuild,
webpack. Keeps the existing lodash override (added in baf0f25).

Lockfile regenerated against current main (post MUI v7 upgrade and
package split #161).
vredchenko added a commit that referenced this pull request Apr 29, 2026
Bumps devDependencies to non-vulnerable versions:
- @babel/core, @babel/preset-env, @babel/preset-typescript -> ^7.26.10
- @storybook/* and storybook -> ^8.6.15
- eslint -> ^9.20.0

Adds pnpm overrides for transitive deps flagged by the scanner:
qs, js-yaml, brace-expansion (v1 & v2), @babel/runtime, esbuild,
webpack. Keeps the existing lodash override (added in baf0f25).

Lockfile regenerated against current main (post MUI v7 upgrade and
package split #161).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

being reviewed Someone is reviewing this PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants